<template>
     <div>
         <div class="head"></div>
         <div class="content">
           <p class="tit">* 每个账号每天可以投票一次，每次需选满最精美池塘20个、最特色水客厅10个，方可提交。</p>
           <p class="tit">* 活动时间: 2024年1月17日-2024年1月24日 12: 00</p>
           <img class="title1" src="./../../static/images/title1.png" alt="">
           <div class="card1">
                <div class="item" v-for="(item,index) in list1" :key="item+index">
                    <div class="num">NO.{{index+1}}</div>
                    <div class="card_con">
                         <img class="item_img" :src="'https://project.hangzhou.com.cn'+item.thumb_file" alt="">
                         <p class="card_p">标题：{{ item.title }}</p>
                         <div class="vote_div">
                             <div class="vote">票数：<span style="font-weight: bolder;">{{ item.number }}</span></div>
                             <van-checkbox icon-size="30px" checked-color="#ec9c01" v-model="checked1[index].check"></van-checkbox>
                         </div>
                         <div @click="detail(item.id)" class="detail">详情</div>
                    </div>
                </div>
           </div>
           <img class="title1" src="./../../static/images/title2.png" alt="">
           <div class="card1">
            <div class="item" v-for="(item,index) in list2" :key="item+index">
                    <div class="num">NO.{{index+1}}</div>
                    <div class="card_con">
                         <img class="item_img" :src="'https://project.hangzhou.com.cn'+item.thumb_file" alt="">
                         <p class="card_p">标题：{{ item.title }}</p>
                         <div class="vote_div">
                             <div class="vote">票数：<span style="font-weight: bolder;">{{ item.number }}</span></div>
                             <van-checkbox icon-size="30px" checked-color="#ec9c01" v-model="checked2[index].check"></van-checkbox>
                         </div>
                         <div @click="detail(item.id)" class="detail">详情</div>
                    </div>
                </div>
           </div>
           <div class="vote_btn" @click="vote">点击投票</div>
         </div>
     </div>
</template>
<script>
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);
export default {
  name: 'HelloWorld',
  data () {
    return {
      list1:[],
      list2:[],
      checked1:[],
      checked2:[]
    }
  },
  created(){
     this.getList()
  },
  methods:{
    getList(){
        this.$http.get('https://vote.hangzhou.com.cn/api/2023reformation').then(res=>{
          this.list1 = res.data.list.res2 //客厅
          this.list2 = res.data.list.res1 //池塘
          var arr = []
          this.list1.forEach((item,index)=>{
            var obj = {}
            obj.check = false
            obj.id = item.id
            arr.push(obj)
          })
          this.checked1 = arr//客厅
          var arr2 = []
          this.list2.forEach((item,index)=>{
            var obj2 = {}
            obj2.check = false
            obj2.id = item.id
            arr2.push(obj2)
          })
          this.checked2 = arr2 //池塘
        })
    },
    detail(id){
      console.log(id)
      this.$router.push({
         path: '/detail',
         query:{
               id:id,
          }

         })
    },
    vote(){
      var count = 0
      var arr = []
      this.checked1.forEach((item,index)=>{
           if(item.check){
            count++
            arr.push(item.id)
           }
      })
      var count1 = 0
      this.checked2.forEach((item,index)=>{
           if(item.check){
            count1++
            arr.push(item.id)
           }
      })
      if(count1==20&&count==10){
        var params={
          ids:arr,
          token:this.$store.state.token
        }
        this.$http.post('https://vote.hangzhou.com.cn/api/2023reformation/post',params).then(res=>{
          if(res.data.state==1){
             Toast.success(res.data.message);
             arr.forEach((item1,index1)=>{
                  this.list1.forEach((item2,index2)=>{
                     if(item1 == item2.id){
                      Vue.set(item2,'number',item2.number+1)
                     }
                  })
             })
             arr.forEach((item1,index1)=>{
                  this.list2.forEach((item2,index2)=>{
                     if(item1 == item2.id){
                      Vue.set(item2,'number',item2.number+1)
                     }
                  })
             })
           }else{
            Toast.fail(res.data.message);
           }
         }).catch((err)=>{
          Toast.fail('活动火爆，请稍后参与');
         })
      }else if(count1<20||count<10){
        
         Toast.fail('没有选满项目');
    
      }else if(count1>20||count>10){
          Toast.fail('所选项目超额');
      }
  
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.head{
  width: 100%;
  height: 466px;
  background: url('./../../static/images/head.png') no-repeat;
  background-size: 100% 100%;
}
.content{
  width: 100%;
  height: auto;
  background: url('./../../static/images/content.png') no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding:  20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tit{
  color: #4e98fb;
  margin: 0;
  padding: 0;
  font-size: 18px;
}
.title1{
  width: 254px;
  height: 40px;
  margin-bottom: 30px;
  margin-top: 40px;
}
.card1{
  width:100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item{
  width: 47%;
  height: 450px;
  background-color: #fff;
  margin-bottom: 25px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.num{
  width: 80px;
  height: 30px;
  position: absolute;
  top: 0;
  left: calc(50% - 40px);
  background-color: #549bfc;
  color: #fff;
  border-radius: 0 0 5px 5px;
  text-align: center;
  line-height: 30px;
}
.card_con{
  width: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item_img{
  width: 100%;
  height: 230px;
  object-fit: cover;
  margin-top: 10px;
}
.card_p{
  width: 100%;
  font-size: 16px;
  color: #000;
  text-overflow:ellipsis;
   overflow:hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display:-webkit-box;
  height: 42px;
}
.vote{
  color: #f39800;
  font-size: 16px;
}
.vote_div{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.detail{
  width: 130px;
  height: 40px;
  border: 1px solid #4e98fb;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  font-size: 24px;
  color: #478ffe;
  margin-top: 30px;
  border-radius: 20px;
}
.vote_btn{
  width: 140px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  background-color: #478ffe;
}
</style>
